<template>
    <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>

        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>
                        <input type="checkbox" v-model="allCheck" @change="allCheckChange">
                        全选
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>

                <tr v-for="(item,index) of products" :key="item.id">
                    <td>
                        <input type="checkbox" v-model="checks" :value="item">
                    </td>
                    <td>
                        <img :src="item.imgSrc" width="100" alt="">
                    </td>
                    <td>
                        {{item.code}}
                    </td>
                    <td>
                        {{item.productName}}
                    </td>
                    <td>
                        {{item.price}}
                    </td>
                    <td>
                        <button @click="decrease(item)" :disabled="item.count===1">-</button>
                        &nbsp;
                        {{item.count}}
                        &nbsp;
                        <button @click="increase(item)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>


            </table>
            <div class="add" style="text-align: center;" v-show="!products.length">没有更多数据了</div>
            <h1 class="add" style="text-align:right">总价格:{{total}}</h1>
        </div>
    </div>
</template>


<script>
    let local = {
        get(key) {
            return JSON.parse(localStorage.getItem(key))
        },
        set(key, value) {
            localStorage.setItem(key, JSON.stringify(value))
        }
    }
    let initialData =([
    {
            id:1,
            code: 1,
            imgSrc: "https://tse4-mm.cn.bing.net/th/id/OIP-C.ef1pag92GOKD9OsQCY9C2QHaHa?w=171&h=180&c=7&r=0&o=5&dpr=1.7&pid=1.7",
            productName: "哎呦",
            price: 9.9,
            count: 1
        },
        {
            id:2,
            code: 123,
            imgSrc: "https://tse2-mm.cn.bing.net/th/id/OIP-C.Rpz71iABOMMtOBBhmlwtygHaFv?w=186&h=144&c=7&r=0&o=5&dpr=1.7&pid=1.7",
            productName: "荷花",
            price: 90,
            count: 10
        }
    ])

    export default{
    data () {      
        return {
            allCheck:false,
            // 选中的商品
            checks:[],
            code:'',
            productName:'',
            price:'',
            imgSrc:'',
            products:local.get('qf-data')?? initialData
        }
       
    },
    watch:{  //直接侦听数组就行了
        checks(newChecks){
            if(newChecks.length===this.products.length){
                this.allCheck=true
            }else{
                this.allCheck=false
            }
        }
    },
    computed: {
        total(){
            let res= this.checks.reduce((total,item)=>{
                return total += item.price*item.count
            },0)
            return res.toFixed(2)
        }
    },
    methods: {
        dell(index){
            // 删除,数组中splice 去掉某一项
            let target= this.products.splice(index,1);

            // 将products存到本地
            local.set('qf-data',this.products);
            // 过滤掉checks数组中id和传入id相同的选项
            // 返回checks数组中id和传入id不相同的选项
            this.checks=this.checks.filter(item=>item.id!==target[0].id)
        },
        // 添加
        add(){
            // 非空校验
            if(!this.code||!this.imgSrc||!this.productName||!this.price){
                return
            }
            // 收集输入框数据，添加到products数组，数组多一项，视图多增一项
            let obj={
                id:Math.random().toString(32).substring(2),
                imgSrc:this.imgSrc,
                code:this.code,
                price:this.price,
                count:1,
                productName:this.productName
            }
            // 填到数组中
            this.products.push(obj);

            // 将products存到本地
            local.set('qf-data',this.products)

        },
        allCheckChange(){
            if(this.allCheck){
                this.checks=this.products;
            }else{
                this.checks=[]
            }
        },
        increase(current){
            current.count++
        },
        decrease(current){
            current.count--
        }
    }
}

</script>



<style>
    #app {
        width: 600px;
        /* margin: 10px auto; */
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>